<template>
  <div class="min-h-screen transition-colors ">
    <!-- 顶部导航栏 -->
    <header class="flex items-center justify-between p-4 transition-colors bg-white shadow-sm dark:bg-gray-800 dark:shadow-gray-700/20">
      <div class="text-2xl font-bold text-gray-900 dark:text-white">vivian的工具网站</div>
      <!-- 搜索框 -->
      <div class="relative w-64">
        <input
          v-model="search"
          type="text"
          placeholder="搜索工具..."
          class="w-full px-4 py-2 text-gray-900 placeholder-gray-500 transition-colors bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
        />
      </div>
    </header>

    <!-- 分类选择器 -->
    <div class="flex justify-center gap-4 p-4 transition-colors ">
      <button
        v-for="category in categories"
        :key="category.value"
        @click="selectedCategory = category.value"
        class="px-6 py-2 transition-all rounded-full"
        :class="selectedCategory === category.value
          ? 'bg-blue-500 dark:bg-blue-600 text-white shadow-sm'
          : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 shadow-sm'"
      >
        {{ category.label }}
      </button>
    </div>

    <!-- 主内容区 -->
    <main class="p-8 transition-colors">
      <BentoGrid :tools="filteredTools" @favorite="onFavorite" />
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useToolsStore } from '../store/tools'
import BentoGrid from '../components/BentoGrid.vue'

interface Category {
  label: string
  value: string
}

// 分类定义
const categories: Category[] = [
  { label: '全部', value: 'all' },
  { label: '实用工具', value: '开发工具' },
  { label: '摸鱼工具', value: '娱乐工具' },
  { label: '前端资源', value: '前端资源' }
]

const search = ref('')
const isDark = ref(false)
const selectedCategory = ref('all')
const toolStore = useToolsStore()

const filteredTools = computed(() => {
  let result = toolStore.tools

  // 搜索过滤
  if (search.value) {
    const searchLower = search.value.toLowerCase()
    result = result.filter(tool =>
      tool.title.toLowerCase().includes(searchLower) ||
      tool.description.toLowerCase().includes(searchLower) ||
      tool.category?.toLowerCase().includes(searchLower) ||
      tool.tags?.some(tag => tag.toLowerCase().includes(searchLower))
    )
  }

  // 分类过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(tool => tool.category === selectedCategory.value)
  }

  return result
})

function onFavorite(id: string) {
  toolStore.toggleFavorite(id)
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>